<template>
    <div>
      <button @click="toggleModal">Open Modal</button>
      <teleport to="body">
        <div v-if="isModalOpen">
          <div class="modal-overlay">
            <div class="modal">
              <h2>Modal</h2>
              <button @click="closeModal">Close</button>
            </div>
          </div>
        </div>
      </teleport>
    </div>
  </template>
  
  <script>
  import { ref } from 'vue';
//   teleport 是 Vue 3 中新增的一个特性，用于在 DOM 中的任何位置渲染组件的内容。通常情况下，Vue 组件的内容都会被挂载在组件的根 DOM 节点下，但有时候我们希望将组件的内容渲染到组件之外的DOM节点中，这时就可以使用 teleport。
// 在 Vue 3 中，teleport 提供了一种将组件内容移动到其他 DOM 节点的能力，而不会破坏组件的层级结构。这对于创建模态框、弹出式菜单、通知框等需要在页面中的特定位置渲染内容的情况非常有用。
  export default {
    setup() {
      const isModalOpen = ref(false);
  
      const toggleModal = () => {
        isModalOpen.value = !isModalOpen.value;
      };
  
      const closeModal = () => {
        isModalOpen.value = false;
      };
  
      return {
        isModalOpen,
        toggleModal,
        closeModal
      };
    }
  }
  </script>
  
  <style>
  .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .modal {
    background: white;
    padding: 20px;
    border-radius: 4px;
  }
  </style>
  